<!--
 * @Author: shuai
 * @Date: 2024-08-10 14:41:42
 * @LastEditors: shuai
 * @LastEditTime: 2024-08-18 14:49:39
 * @Description: file content
-->


<template>
  <main>
    <el-button v-loading="loading" class="w-[300px]" type="primary" @click="handleClick">测试</el-button>
    <el-button type="warning" @click="handleClick">测试</el-button>
    <el-button  @click="handleClick">测试</el-button>
    <span class="iconify icon-[mdi-light--home] text-xl text-red-600"></span>
    <span class="iconify-color vscode-icons--file-type-tailwind"></span>
    <span class="icon-[mdi-light--home]"></span>
    <el-input></el-input>
    <el-select>
      <el-option>123</el-option>
    </el-select>
    <el-table>                  
      <el-table-column label="测试"></el-table-column>                   
    </el-table>
  </main>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';

const loading = ref(true);
setTimeout(() => {
  loading.value = false;
}, 2000);

const handleClick = () => {
  ElMessage.success('测试成功');
}
</script>

<style>
.iconify {
 display: inline-block;
 width: 1em;
 height: 1em;
 background-color: currentColor;
 -webkit-mask-image: var(--svg);
 mask-image: var(--svg);
 -webkit-mask-repeat: no-repeat;
 mask-repeat: no-repeat;
 -webkit-mask-size: 100% 100%;
 mask-size: 100% 100%;
}

.iconify-color {
 display: inline-block;
 width: 1em;
 height: 1em;
 background-image: var(--svg);
 background-repeat: no-repeat;
 background-size: 100% 100%;
}
</style>